<template>
  <div :class="[actives, language]">
    <div class="header-box">
      <div class="header-nav">
        <el-row type="flex" class="row-bg" justify="center">
          <el-col class="width-cover" :sm="20">
            <el-row type="flex" class="iphone5-wrap" justify="space-between">
              <el-col class="iphone5" :span="6">
                <div class="icon">
                  <img src="../static/images/icon.png" alt>
                  <span class="swith-lan">
                    <template v-if="type == 'MiddleEast'">
                      <span>
                      <a @click="changeArBool(0)" :class="{ar:arBool==0}" href="#">English</a> /
                      </span>
                      <span >
                        <a @click="changeArBool(1)" :class="{ar:arBool==1}" href="#">العربية</a> 
                        <span v-if="type == 'MiddleEast'"></span>
                        <span v-else>/</span>
                      </span>
                    </template>
                    <template v-else>
                      <span>
                      <a @click="changeArBool(0)" :class="{ar:arBool==0}" href="#">English</a> /
                      </span>
                      <span>
                      <a @click="changeArBool(2)" :class="{ar:arBool==2}" href="#">فارسی</a>
                    </span>
                    </template>
                  </span>
                </div>
              </el-col>
              <el-col class="iphone5" :span="18">
                <ul class="nav">
                  <li v-for="(item,index) in navList" :key="item">
                    <a
                      :class="{active:activeNum == index}"
                      @click="changeActive(index)"

                      :href="'#nav'+index"
                    >{{item}}</a>
                  </li>
                </ul>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="header-video">
        <div class="video-icon">
          <img class="pointer" @click="open5" src="../static/images/play.png" alt>
        </div>
      </div>
    </div>
    <div class="appointment-reward-box" id="nav1">
      <div class="appointment-reward"></div>
      <div class="appointment-reward-form">
        <div class="form-position">
          <div class="choose-radio">
            <form>
              <div class="ios left type-mobile">
                <input
                  name="type"
                  v-model="checkedValue"
                  checked="true"
                  type="radio"
                  id="ios"
                  value="ios"
                >
                <label for="ios">&nbsp;ios&nbsp;</label>
              </div>
              <div class="Android left type-mobile">
                <input name="type" v-model="checkedValue" type="radio" id="Android" value="Android">
                <label for="Android">&nbsp;Android&nbsp;</label>
              </div>
            </form>
          </div>
          <div class="choose-title">&nbsp;Enter your Email address.&nbsp;</div>
          <div class="enter-email">
            <input
              v-model="enterMail"
              type="text"
              placeholder="Example for Email Address: example@wingjoy.com"
            >
          </div>
          <div class="flex">
            <div class="isAgree">
              <input type="checkbox" v-model="agreenYes" id="isAgree">
              <label v-html="labelModal" for="isAgree"></label>
            </div>
            <div class="Privacy">
              <span>
                <a href>Privacy Policy >></a>
              </span>
            </div>
          </div>
          <div class="tell-me">
            <img @click="getTellMeForm" :src="tellMe" alt>
          </div>
          <div class="like">
            <div
              @click="changeLike"
              class="fb-like"
              data-href="https://www.facebook.com/abtalalsharq/"
              data-layout="button_count"
              data-action="like"
              data-size="small"
              data-show-faces="false"
              data-share="false"
            ></div>
            <div
              class="fb-share-button"
              @click="changeShare"
              data-size="small"
              data-href="https://www.facebook.com/abtalalsharq/"
              data-layout="button_count"
            ></div>
          </div>
        </div>
      </div>
      <div class="appointment-reward-dec" id="nav2">
        <div class="carousel">
          <Carousel :language="language"/>
        </div>
      </div>
      <div class="find-more" id="nav3">
        <div class="group">
          <a href="https://www.facebook.com/groups/abtalalsharq/">
            <img :src="findGroup" alt>
          </a>
        </div>
      </div>
      <div class="guild-war" id="nav4">
        <div class="contact">
          <a href="https://www.facebook.com/abtalalsharq">
            <img src="../static/images/Facebook.png" alt>
          </a>
          <a href="https://twitter.com/abtalalsharq">
            <img src="../static/images/Twitter.png" alt>
          </a>
          <a href="https://www.youtube.com/channel/UCF1zhkf5d8ttYBCZhhBOaKQ?view_as=subscriber">
            <img src="../static/images/YouTube.png" alt>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from "./components/Carousel.vue";
import $ from "jquery";

export default {
  name: "App",
  components: {
    Carousel
  },
  data() {
    return {
      type:'International',//默认中东(MiddleEast)，否则国际(International)
      language:'en',
      actives: "actives",
      navListTotal:[
        ["Video", "Stay Updated", "Guild War", "Community", "Event"],
        ["فيديو", "ابقي على اطلاع","حروب التحالفات", "المنتدى", "الأحداث"],
        ["ویدئو", "به روز باش", "نبرد اتحادیه ها", "اجتماع", "رویداد"]
      ],
      navList: ["Video", "Stay Updated", "Guild War", "Community", "Event"],
      active: "active",
      activeNum: 0,
      arBool: 0,
      checkedValue: "ios",
      agreenYes: true,
      enterMail: "",
      findGroupTotal:["../static/en/group.png","../static/ar/group.png","../static/fr/group.png"],
      findGroup: "../static/en/group.png",
      tellMeTotal:["../static/en/book.png","../static/ar/book.png","../static/fr/book.png"],
      tellMe: "../static/en/book.png",
      labelModal: " I agree to the Privacy Plicy "
    };
  },
  watch: {},
  mounted() {
    //     FB.init({
    //     appId: '1076256895710421',
    //     xfbml: true,
    //     version: 'v2.5'
    // }) 
    window.history.pushState(null,null,'?type='+this.type);
    const MiddleEast = window.location.href.indexOf('MiddleEast')
    const International = window.location.href.indexOf('International') 
    if (MiddleEast > 0) {
      this.language = 'ar'
      this.arBool = 1
      this.navList = this.navListTotal[1]
      this.tellMe = this.tellMeTotal[1]
      this.findGroup = this.findGroupTotal[1]
    }else if(International > 0){
      this.language = 'en'
      this.arBool = 0
      this.navList = this.navListTotal[0]
      this.tellMe = this.tellMeTotal[0]
      this.findGroup = this.findGroupTotal[0]
    }
    this.fblikecallback();
  },
  methods: {
    //监听回调
    fblikecallback() {
      FB.Event.subscribe("edge.remove", function() {
        // this.fblikecallbackdata = false //false: 不喜欢  true: 喜欢
        console.log("edge.remove");
      });

      FB.Event.subscribe("edge.create", function() {
        // this.fblikecallbackdata = true
        console.log("edge.create");
      });
    },
    open5() {
      this.$alert(
        '<iframe width="560" height="315" src="https://www.youtube.com/embed/C8yhvNcoLKw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
        "",
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false
        }
      );
    },
    changeActive(index) {
      console.log(index);
      this.activeNum = index;
    },
    changeArBool(num) {
      console.log(num);
      if (num == 1) {
        this.language = "ar";
        // window.history.pushState(null,null,'?language='+this.language);
        this.findGroup = "../static/ar/group.png";
        this.tellMe = "../static/ar/book.png";
        this.navList = this.navListTotal[1]
        this.labelModal =
          '<div style="vertical-align:middle;display:inline-block;width:10.9rem;height:0.55rem;"></div>';
      } else if(num == 0) {
        this.language = "en"; 
        // window.history.pushState(null,null,'?language='+this.language);
        this.findGroup = "../static/en/group.png";
        this.tellMe = "../static/en/book.png";
        this.labelModal = " I agree to the Privacy Plicy ";
        this.navList = this.navListTotal[0]
      } else if (num == 2) {
        this.language = "fr";
        // window.history.pushState(null,null,'?language='+this.language);
        this.navList = this.navListTotal[2]
        this.tellMe = "../static/fr/book.png";
        this.findGroup = "../static/fr/group.png";
      }
      this.arBool = num;
    },
    changeLike() {
      if (this.arBool == 0) {
        this.likeImg =
          this.likeImg === "./static/images/like.png"
            ? "./static/images/liked.png"
            : "./static/images/like.png";
      } else {
        this.likeImg =
          this.likeImg === "./static/images/liked-ar.png"
            ? "./static/images/like-ar.png"
            : "./static/images/liked-ar.png";
      }
    },
    changeShare() {
      if (this.arBool == 0) {
        this.shareImg =
          this.shareImg === "./static/images/share.png"
            ? "./static/images/shared.png"
            : "./static/images/share.png";
        window.open(
          "http://www.facebook.com/sharer.php?u=" +
            encodeURIComponent("https://www.facebook.com/abtalalsharq/") +
            "&t=" +
            encodeURIComponent(document.title),
          "newWindow",
          "width=800, height=400",
          "center"
        );
      } else {
        this.shareImg =
          this.shareImg === "./static/images/shared-ar.png"
            ? "./static/images/share-ar.png"
            : "./static/images/shared-ar.png";
      }
    },
    getTellMeForm() {
      const type = this.checkedValue;
      const isAgreen = this.agreenYes;
      const enterMailMes = this.enterMail;
      console.log(type, isAgreen, enterMailMes);
      var url = "/api/TestApply/ApplyGuild";
      if (location.href.indexOf(".com") < 0) {
        url = "http://s2.pptzb.com" + url;
      }
      $.post(
        url,
        {
          email: "2333@33.com",
          deviceInfo: "ios"
        },
        function(data) {
          console.log(data);
          if (data.ErrorCode && data.ErrorCode != 0) {
            alert(data.ErrorMessage);
            return;
          }
          //按钮替换成已提交那张
          this.tellMe = "../static/images/booked.png";
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./scss/App.scss";
</style>
